<template>
  <el-container>
    <el-header class="page-header">
      <span>AltaAI Story Writting Assitant</span>
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="always" class="form-card">
            <el-divider content-position="left">Give your idea about the story, and the Alta Al will generate a story
              based on your input.
            </el-divider>

            <el-form label-position="top" label-width="80px" :model="generateScriptForm" ref="generateScriptForm"
                     :rules="rules">
              <el-form-item label="Story Description: give your idea of the story!" prop="story_discription">
                <el-input type="textarea" :rows="4" v-model="generateScriptForm.story_discription"></el-input>
              </el-form-item>

              <el-form-item label="Story Genre" prop="story_genre">
                <el-radio-group v-model="generateScriptForm.story_genre" size="medium">
                  <el-radio v-for="(item, index) in genreList" :key="index" :label="item" border class="genre-radio">
                    {{ item }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="Story Time" prop="story_time">
                <el-input type="textarea" :rows="4" v-model="generateScriptForm.story_time"></el-input>
              </el-form-item>

              <el-form-item label="Story Location" prop="story_location">
                <el-input type="textarea" :rows="4" v-model="generateScriptForm.story_location"></el-input>
              </el-form-item>

              <el-form-item label="Actors, use comma to separate them" prop="actor_names">
                <el-input type="textarea" :rows="4" v-model="generateScriptForm.actor_names"></el-input>
              </el-form-item>

              <el-form-item>
                <div class="btn-group">
                  <el-button class="btn-item" @click="onClear()">Clear</el-button>
                  <el-button class="btn-item" type="primary" @click="onSubmit()">Submit</el-button>
                </div>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="result-card">
            <el-divider content-position="left">Generate Status:</el-divider>
            <div class="status-text">{{ scriptResult.status || 'Waiting for generation...' }}</div>

            <el-divider content-position="left">Al generated Script:</el-divider>
            <div class="result-text">{{ scriptResult.script || 'Waiting for generation...' }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import {generate_script} from "@/api/videoUpload"

export default {
  name: "GenerateScript",
  components: {},
  data() {
    return {
      loading: null,
      genreList: ['Action', 'Comedy', 'Drama', 'Fantasy', 'Horror', 'Mystery', 'Romance', 'Science Fiction', 'Thriller', 'Western', 'Documentary', 'Animation', 'Musical', 'War', 'Experimental'],
      generateScriptForm: {
        story_discription: '',
        story_genre: 'Action',
        story_time: '',
        story_location: '',
        actor_names: ''
      },
      rules: {
        story_discription: [
          {required: true, message: 'Please input story description', trigger: 'blur'}
        ],
        story_genre: [
          {required: true, message: 'Please select a Story Genre', trigger: 'change'}
        ],
        story_time: [
          {required: true, message: 'Please input Story Time', trigger: 'blur'}
        ],
        story_location: [
          {required: true, message: 'Please input Story Location', trigger: 'blur'}
        ],
        actor_names: [
          {required: true, message: 'Please input Actor Names', trigger: 'blur'}
        ]
      },
      // 生成脚本结果
      scriptResult: {}
    };
  },
  async mounted() {
    // 模拟数据
    // this.generateScriptForm = {
    //   "story_discription": "A group of people are stranded on an island.",
    //   "story_genre": "Thriller",
    //   "story_time": "night",
    //   "story_location": "a deserted island",
    //   "actor_names": "Tom, Jerry, and Alice"
    // }
  },
  methods: {
    onLoading(text) {
      this.loading = this.$loading({
        lock: true,
        text: text || 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    // 清空表单
    onClear() {
      this.generateScriptForm = {
        story_discription: '',
        story_genre: 'Action',
        story_time: '',
        story_location: '',
        actor_names: ''
      };
      this.$refs['generateScriptForm'].resetFields();
      this.scriptResult = {};
    },
    // 提交 分析视频文件
    onSubmit() {
      this.$refs['generateScriptForm'].validate((valid) => {
        if (valid) {
          this.onLoading('Generating...');
          generate_script(this.generateScriptForm).then(res => {
            this.loading.close();
            this.scriptResult = res || {};
          }).catch(() => {
            this.loading.close();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F6FC;
  font-size: 25px;
  font-weight: 500;
  padding: 40px 0;
}

.form-card, .result-card {
  width: 100%;
  min-height: 600px;
}

.genre-radio {
  min-width: 160px;
  margin: 0 10px 10px 0 !important;
}

.btn-group {
  display: flex;
}

.btn-item {
  flex: 1;
}

.status-text {
  font-size: 16px;
  font-weight: 500;
  padding: 0 10px 10px;
}

.result-text {
  font-size: 16px;
  white-space: pre-line;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 20px;
}
</style>
